<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>文件测试</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		.nav-tabs li{cursor: pointer;}
	</style>
</head>
<body>
	<sys:message content="${message}"/>
	<div id="content" class="row-fluid">
		
		<div id="right" style="">
			
			
			<div id="queryForm" style="" class="breadcrumb form-search">
				<form action="searchForm">
				<ul class="ul-form">
					<li>
						<label class="control-label">服务器类型:</label>
						<select id="serverType" name="serverType" class="input-medium required">
							<option value="aws">亚马逊</option>
						 	<option value="qiniu">七牛云</option>
						 	<option value="aliyun">阿里云</option>
						 	<option value="local">本地</option>
						</select>
					</li>
					<li><label>bucket：</label>
						<select id="bucketName" name="bucketName" class="input-xlarge required">
						 	
						</select>
					</li>
					<li><label>前缀：</label>
						<input name="prefix" maxlength="50" class="input-medium">
					</li>
					<li><label>类型：</label>
						<input name="delimiter" maxlength="50" class="input-medium">
					</li>
					
					<li class="clearfix"></li>
				</ul>
				<div style="text-align: right;display: block;padding-right: 50px;">
						<input id="btnSubmit" class="btn btn-primary" type="button" value="查询" onclick="query(this)"/>
						<input id="btnReset" class="btn " type="reset" value="重置" onclick="resetForm(this)"/>
						<input id="btnClear" class="btn " type="button" value="清除" onclick="clearForm(this)"/>
				</div>
				</form>
			</div>
			<div class="" style="margin-bottom: 3px;">
					<input id="btnAdd" class="btn btn-primary" type="button" value="新 增" onclick="add()"/>&nbsp;
					<input id="btnEdit" class="btn btn-primary" type="button" value="修 改" onclick="edit()"/>&nbsp;
					<input id="btnDel" class="btn btn-primary" type="button" value="删 除" onclick="del()"/>&nbsp;
					<input id="btnDetail" class="btn " type="button" value="查 看" onclick="detail()"/>&nbsp;
			</div>
			<form id="listForm" method="post">
				<table id="contentTable"
					class="table table-striped table-bordered table-condensed">
					<thead>
						<tr class="tableHead">
							<th style="text-align: center;" onclick="toggleCheckBox('checkboxName',this)">
								<input type="checkbox" checkboxName="sort"
								name="table_form_checkbox_all" value=""></th>
							<th style="text-align: center;">序号</th>
							<th>名称</th>
							<th>路径</th>
							<th>类型</th>
							<th>大小</th>
							<th>备注信息</th>
							<th>更新时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tablechildList">
						
					</tbody>
				</table>
				<div class="pagination" style="margin-left: 10px;">
					<ul class="ul-form">
					<li><label>size：</label>
						<input name="pageSize" value="10" maxlength="50" class="input-mini" style="width: 50px;">
					</li>
					</ul>
				</div>
			</form>
			<div style="height: 30px;width: 100%;"></div>
			
			<script type="text/template" id="tablechildTpl">//<!--
					<tr id="tablechildList{{idx}}">
						<td style="text-align:center;" >
							<input type="checkbox" name="sort" attrname="sort" value="">
							<input type="hidden" name="id" attrname="id" value="{{row.path}}"/>
							<input type="hidden" name="delFlag" value="{{row.delFlag}}"/>
							<input type="hidden" name="serverType" value="{{row.serverType}}"/>
							<input type="hidden" name="bucketName" value="{{row.bucketName}}"/>
						</td>
						<td style="text-align:center;">
							<span attrname="number">{{row.rowno}}</span>
						</td>
						<td><a target="_blank" href="{{row.url}}">
							<span attrname="name">{{row.name}}</span></a>
						</td>
						<td>
							<span attrname="path" title="{{row.path}}">{{row.path}}</span>
						</td>
						<td>
							<span attrname="type">{{row.type}}</span>
						</td>
						<td>
							<span attrname="size" value="{{row.size}}">{{row.showSize}}</span>
						</td>
						<td>
							<span attrname="remarks"></span>
						</td>
						<td>
							<span attrname="lastModified">{{row.showDate}}</span>
						</td>
						<td>
							<span attrname="opt">
								<a href="javascript:void(0);" opt="del" onclick="del(this)">删除</a>
								<a href="javascript:void(0);" opt="get" onclick="get(this)">查看</a>
							</span>
						</td>
						//-->
				</script>
		</div>
		
	</div>
	
<script type="text/javascript">
	//URL
	var listUrl = '${ctx}/file/';
	
	var leftWidth = 180; // 左侧窗口大小
	var htmlObj = $("html"), mainObj = $("#main");
	var frameObj = $("#left, #openClose, #right, #right iframe");
	function wSize(){
		 var strs = getWindowSize().toString().split(",");
		//htmlObj.css({"overflow-x":"hidden", "overflow-y":"hidden"});
		mainObj.css("width","auto");
		frameObj.height(strs[0] - 5);
		var leftWidth = ($("#left").width() < 0 ? 0 : $("#left").width());
		$("#right").width($("#content").width()- leftWidth - $("#openClose").width() -5);
		$(".ztree").width(leftWidth - 10).height(frameObj.height() - 46); 
	}

	var tablechildRowIdx = 0 ;
	var tablechildTpl = $("#tablechildTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
	$(document).ready(function() {
		freshBucket();
		query();
		jQuery('#queryForm').find('[name="serverType"]').change(function(){
			freshBucket();
		});
	});
	
	function freshBucket(){
		
		var serverTypeObj = jQuery('#queryForm').find('[name="serverType"]');
		var serverType = serverTypeObj.val();
		if(serverType == null || serverType == ''){
			alertx("服务类型不能为空！");
		}
		
		//清除原有数据
		var bucketObj = jQuery('#queryForm').find('[name="bucketName"]');
		bucketObj.children().remove();
		
		var url = listUrl+"getBucketList";
		var data = {serverType : serverType};
		jQuery.ajax({  
			url: url, async : false,type: "POST",
			data : data,
			success: function(response) {
				rows = response;
				if(rows !=null && rows.length>0){
					for(var i =0 ; i<rows.length; i++){
						var bucket = rows[i];
						var option = '<option value="'+bucket+'">'+bucket+'</option>';
						bucketObj.append(option);
					}
					jQuery(bucketObj).select2();
				}
			},
			error: function(e){console.error(e);}
		});
	}
	
	function query(){
		var queryForm = jQuery('#queryForm');
		var prefix = queryForm.find('[name="prefix"]').val();
		var delimiter = queryForm.find('[name="delimiter"]').val();
		var serverType = queryForm.find('[name="serverType"]').val();
		var bucketName = queryForm.find('[name="bucketName"]').val();
		var pageSize = jQuery('#listForm').find('[name="pageSize"]').val();
		
		var url = listUrl+"qiniuList";
		var data = {prefix: prefix  
				,delimiter: delimiter 
				,serverType: serverType
				,bucketName: bucketName
				,pageSize: pageSize
				
		};
		
		jQuery.ajax({  
			url: url, async : false,type: "POST",
			data : data,
			success: function(response) {
				rows = response.fileList;
				jQuery('#tablechildList').children().remove();
				if(rows !=null){
					loadTablechildListData(rows);
					 if("smctest" !=response.bucketName){
						jQuery("[opt='del']").remove();
					} /**/
					jQuery('[attrname="path"]').each(function(){
						var html = jQuery(this).html();
						var showHtml = html.substring(html.length>30?(html.length-20):0);
						jQuery(this).html(showHtml);
					});
					jQuery('[attrname="path"]').each(function(){
						var html = jQuery(this).html();
						var showHtml = html.substring(html.length>30?(html.length-20):0);
						jQuery(this).html(showHtml);
					});
					
				}
				//alertx(info.message);
			},
			error: function(e){console.error(e);}
		});
	}

	function add(){
		var uploadWinUrl = '${ctxStatic}/file-tool/uploadify/upload/qiniuUploadify.jsp';
		var uploadAction  = "${ctxStatic}/file/core/connector/java/connector.java;JSESSIONID=${pageContext.session.id}"; //支持多参数上传
		var fileTypeDesc = '所有文件';
		var fileType = '*.*';
		var fileSize = 1024000; //kb
		var fileQueueSize = 10;
		uploadWinUrl = addUrlParam(uploadWinUrl,'callback','query');
		var title = "附件上传";
		var dialogOpts = { width : 400,height: 450,modal: false,buttons: { }    }; 
		
		openWindows(dialogOpts,uploadWinUrl,null,'dialogId',title);
	}
	function get(obj){
		var curentTr = jQuery(obj).parents('tr')[0];
		var key = jQuery('[attrname="id"]', curentTr).val();
		var serverType = jQuery('[name="serverType"]', curentTr).val();
		var bucketName = jQuery('[name="bucketName"]', curentTr).val();
		var url = listUrl+"getFile";
		var data = {key: key ,serverType : serverType, bucketName: bucketName};
		
		jQuery.ajax({  
			url: url, async : false,type: "POST",
			data : data,
			success: function(response) {
				var file = response
				if(file !=null){
					var html = '<a href="'+file.url+'" target="_blank">'+file.name+'</a>';
					html +='<br>'+file.url;
					if(file.eTag!=null && file.eTag!=''){
						html +='<br>ETag : '+file.eTag;
					}
					alertx(html);
				}
			},
			error: function(e){console.error(e);}
		});
	}
	function del(obj){
		if (obj != null) { //单个删除
			var curentTr = jQuery(obj).parents('tr')[0];
			var id = jQuery('[attrname="id"]', curentTr).val();
			confirmx('确认要删除该赛事视频吗？', function() {
				ajaxDelete(id);
			});
		} else { //批量删除
			var table = jQuery("#contentTable");
			var checkboxs = jQuery('input[attrname="sort"]:checked', table);
			if (checkboxs.length == 0) {
				alertx("请选择至少一行数据！");
				return;
			}
			var ids = [];
			for (var i = 0; i < checkboxs.length; i++) {
				var curentTr = jQuery(checkboxs[i]).parents('tr')[0];
				var id = jQuery('[attrname="id"]', curentTr).val();
				ids.push(id);
			}
			var url = listUrl + 'batchDelete?ids=' + ids.join();
			confirmx('确认要删除所选赛事视频吗？', function() {
				ajaxDelete(ids.join());
			});
		}
	}
	
	function ajaxDelete(ids){
		var url = listUrl + 'qiniuDelete?rk='+Math.random();
		var serverType = jQuery('#serverType').val();
		var bucketName = jQuery('#bucketName').val();
		var data = {ids:ids,serverType: serverType,bucketName : bucketName};
	    jQuery.ajax({  
			url: url, async : false,type: "POST",
			data : data,
			success: function(response) {
				info = response;
				if(info.success == '1'){
					query();
				}
				alertx(info.message);
			},
			error: function(e){console.error(e);}
		});
	}
	
	function loadTablechildListData(data){
		tablechildRowIdx = 0;
		var len = jQuery('#tablechildList').children().length;
		for (var i=0; i<data.length; i++){
			addRow('#tablechildList', tablechildRowIdx, tablechildTpl, data[i]);
			tablechildRowIdx = tablechildRowIdx + 1;
		}
	}
	
	function addRow(list, idx, tpl, row){ //新增行
		if(row == null){ row = {};}
		if(row.index == null){ row.index = idx; }
		if(row.rowno == null){ row.rowno = idx+1; }
		row.deleteOptName = row.delFlag == "1"?"撤销":"删除";
		$(list).append(Mustache.render(tpl, {
			idx: idx, delBtn: true, row: row
		}));
		$(list+idx).find("select").each(function(){
			$(this).val($(this).attr("data-value"));
			$(this).select2();
		});
		$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
			if($(this).attr("data-value") == null){
				return ;
			}
			var ss = $(this).attr("data-value").split(',');
			for (var i=0; i<ss.length; i++){
				if($(this).val() == ss[i]){
					$(this).attr("checked","checked");
				}
			}
		});
	}
	
	function delRow(curentTr){ //删除行
		var id = jQuery('[attrname="id"]', curentTr).val();
		var delFlag = jQuery(curentTr).find('[name*=".delFlag"]').val();
		if(id == null || id ==''){
			jQuery(curentTr).remove(); 
		}else if(delFlag == '1'){
			jQuery(curentTr).find('[name*=".delFlag"]').val(0);
			jQuery(curentTr).removeClass("error");
			jQuery(curentTr).find('[name="deleteLine"]').html('删除');
		}else {
			jQuery(curentTr).find('[name*=".delFlag"]').val(1);
			jQuery(curentTr).addClass("error");
			jQuery(curentTr).find('[name="deleteLine"]').html('撤销删除');
		}
		updateTrRowno(jQuery(curentTr).parents('tbody')[0]);
	}
	
	function updateTrRowno(tbody){ //更新行号
		jQuery(tbody).find('[attrname="number"]').each(function(i,v){
			jQuery(this).html(i+1);
		});
	}
</script>
<script src="${ctxStatic}/common/wsize.min.js" type="text/javascript"></script>


</body>
</html>